<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>儿童涂鸦游戏</title>
	<style>
		body {
			font-family: 'Comic Sans MS', cursive, sans-serif;
			text-align: center;
			background: #67aeeb;
			color: #444;
			padding-top: 20px;
		}

		h1 {
			color: #FF6B6B;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
			font-size: 2.5em;
			margin: 20px 0;
		}

		.main-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 30px;
			margin: 20px auto;
			max-width: 1000px;
		}

		#drawing,
		#reference {
			width: 520px;
			height: 400px;
			/* border: 3px solid #FF9999; */
			background: #fff;
			border-radius: 20px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}

		.palette {
			background: #FFF0F0;
			padding: 15px;
			border-radius: 15px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			height: 60px;
			display: flex;
			gap: 10px;
			justify-content: space-around;
			width: 500px;
			margin: 0 auto;
			align-items: center;
		}

		.color {
			width: 40px;
			height: 40px;
			display: inline-block;
			cursor: pointer;
			border-radius: 50%;
			transition: all 0.3s ease;
		}

		.color:hover {
			transform: scale(1.1);
		}

		.color.selected {
			transform: scale(1.2);
			box-shadow: 0 0 5px 0 rgba(13, 107, 107, 0.6);
			border: 3px solid #FFB3B3;
			border-color: #000000;
		}

		.level-info {
			/* margin: 20px auto; */
			padding: 15px;
			background: #FFF0F0;
			border-radius: 15px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			max-width: 600px;
			width: 400px;
			margin-right: 40px;
		}

		.level-info h2 {
			color: #FF6B6B;
			margin: 0;
			font-size: 1.8em;
		}

		.level-info p {
			font-size: 1.2em;
			color: #666;
			margin: 10px 0;
		}

		button {
			background: yellow;
			color: blue;
			border: none;
			padding: 15px 40px;
			font-size: 1.5em;
			border-radius: 50px;
			cursor: pointer;
			margin: 20px;
			font-family: 'Comic Sans MS', cursive, sans-serif;
			transition: all 0.3s ease;
			box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
		}

		button:hover {
			transform: scale(1.05);
			background: yellow;
			box-shadow: 0 6px 12px rgba(255, 107, 107, 0.4);
		}

		#message {
			font-size: 1.2em;
			color: #fff;
			margin: 15px;
			min-height: 30px;
			font-weight: bold;
		}

		#score {
			font-size: 1.5em;
			color: #FF6B6B;
			font-weight: bold;
		}

		.score-container {
			position: fixed;
			top: 20px;
			left: 20px;
			background: rgba(255, 255, 255, 0.9);
			padding: 15px 25px;
			border-radius: 15px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			z-index: 1000;
			animation: pulse 2s infinite;
			display: flex;
			align-items: center;
			font-size: 20px;
		}

		.score-label {
			font-size: 1.2em;
			color: #444;
			margin-right: 5px;
		}

		#score {
			font-size: 2em;
			color: #FF6B6B;
			font-weight: bold;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
			font-family: 'Comic Sans MS', cursive, sans-serif;
		}

		@keyframes pulse {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.05);
			}

			100% {
				transform: scale(1);
			}
		}

		.controller {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.button-container {
			display: flex;
			gap: 20px;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>

<body>
	<!-- <h1>儿童简笔画涂色游戏</h1> -->
	<div class="score-container">
		<div class="score-label">分数：</div>
		<div id="score">0</div>
	</div>
	<div class="palette" id="palette"></div>
	<div class="main-wrapper">
		<svg id="reference" viewBox="0 0 100 80" strokeWidth="2"></svg>
		<svg id="drawing" viewBox="0 0 100 80"></svg>
	</div>
	<div class="controller">
		<div class="level-info">
			<h2>第 <span id="level-number">1</span> 关</h2>
			<p>提示：请为 <span id="shape-name"></span> 涂上正确的颜色</p>
		</div>
		<div class="button-container">
			<button id="prevButton" onclick="prevLevel()" style="display: none;">上一关</button>
			<button id="nextButton" onclick="nextLevel()">下一关</button>
		</div>
	</div>

	<div id="message"></div>


	<audio id="successSound">
		<source
			src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250425175252107382/2025-04-25/audios/bd2d3106-f940-44d6-9354-99a3226a9034.mp3"
			type="audio/mpeg">
	</audio>
	<audio id="successSoundEffect">
		<source
			src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250425180849781142/2025-04-25/audios/cbc4dfaa-dd41-4ce7-9456-af3ab783a0cf.mp3"
			type="audio/mpeg">
	</audio>
	<audio id="errorSound">
		<source
			src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250425175239245823/2025-04-25/audios/dd6a079b-14d7-47b4-9409-54a9d1d2daa2.mp3"
			type="audio/mpeg">
	</audio>
	<audio id="errorSoundEffect" volume="0.2">
		<source
			src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250425180832631201/2025-04-25/audios/1ccf366e-3599-42b7-a33a-f382a9b6148d.mp3"
			type="audio/mpeg">
	</audio>
	<!-- <script src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250425184810752034/2025-04-25/game/levels1.js"></script>
  <script src="https://hf-mix.sparkeducdn.com/huohua/peppa-parent/20250425184128754405/2025-04-25/levels/97f12bba-3796-4fd2-aa6f-9645de1961a5.js"></script> -->
	<script src="./level1.js"></script>
	<script src="./level2.js"></script>
	<script src="./level3.js"></script>
	<script src="./level4.js"></script>

	<script>
		const levels = [
			...level1,
			...level2,
			...level3,
			...level4
		];
		const paletteColors = [
			'#FFA500', // 橙色
			'#228B22', // 绿色
			'#FF0000', // 红色
			'#0000FF', // 蓝色
			'#FF69B4', // 粉色
			'#FFD700', // 金色
			'#8B4513', // 棕色
			'#000000'  // 黑色
		];
		let selectedColor = '#FFA500';
		let currentLevel = 0; // 从最后一关开始
		let levelPassed = false; // 添加关卡通过状态
		let currentScore = parseInt(localStorage.getItem('gameScore')) || 0; // 添加积分变量

		function updateScore() {
			document.getElementById('score').textContent = currentScore;
		}

		function loadLevel(levelIndex) {
			const svg = document.getElementById('drawing');
			const ref = document.getElementById('reference');
			svg.innerHTML = '';
			ref.innerHTML = '';
			document.getElementById('message').textContent = '';

			levelPassed = false; // 重置关卡状态

			// 重新设置当前选中的颜色效果
			document.querySelectorAll('.color').forEach(el => {
				el.classList.remove('selected');
				if (el.getAttribute('data-color') === selectedColor) {
					el.classList.add('selected');
				}
			});

			localStorage.setItem('lastLevel', levelIndex);
			document.getElementById('shape-name').textContent = levels[levelIndex].name;
			document.getElementById('level-number').textContent = levelIndex + 1;

			levels[levelIndex].shapes.forEach(shape => {
				const el = createShape(shape, shape.fill);
				// 只给需要填充的元素添加点击事件
				if (shape.fill !== 'none') {
					el.addEventListener('click', () => {
						el.setAttribute('fill', selectedColor);
					});
				}
				svg.appendChild(el);

				const refEl = createShape(shape, shape.target);
				ref.appendChild(refEl);
			});

			updateScore(); // 更新积分显示
			updateButtonsVisibility();
		}

		function createShape(shape, fillColor) {
			let el;
			if (shape.type === 'polygon') {
				el = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
				el.setAttribute('points', shape.points);
			} else if (shape.type === 'circle') {
				el = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
				el.setAttribute('cx', shape.cx);
				el.setAttribute('cy', shape.cy);
				el.setAttribute('r', shape.r);
			} else if (shape.type === 'rect') {
				el = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
				el.setAttribute('x', shape.x);
				el.setAttribute('y', shape.y);
				el.setAttribute('width', shape.width);
				el.setAttribute('height', shape.height);
			} else if (shape.type === 'path') {
				el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
				el.setAttribute('d', shape.d);
			}
			el.setAttribute('id', shape.id);

			// 处理填充属性
			if (shape.fill === 'none') {
				el.setAttribute('fill', 'none');
				// 对于没有填充的元素，确保它们有描边
				el.setAttribute('stroke', shape.stroke || '#000000');
				el.setAttribute('stroke-width', '1');  // Changed from 2 to 1
			} else {
				el.setAttribute('fill', fillColor);
				el.setAttribute('stroke', '#000');
				el.setAttribute('stroke-width', '1');  // Changed from 2 to 1
			}
			return el;
		}

		function nextLevel() {
			// 在进入下一关之前先检查结果
			const level = levels[currentLevel];
			let allCorrect = true;
			let incorrectShapes = [];
			let uncoloredShapes = [];

			for (const shape of level.shapes) {
				// 跳过 fill: 'none' 的元素
				if (shape.fill === 'none') {
					continue;
				}

				const el = document.querySelector('#drawing #' + shape.id);
				const fill = el.getAttribute('fill').toUpperCase();
				const expected = shape.target.toUpperCase();

				// 检查是否有未涂色的区域（仍然是白色的区域，但目标颜色不是白色）
				if (fill === '#FFFFFF' && expected !== '#FFFFFF') {
					uncoloredShapes.push(shape.name);
					allCorrect = false;
					continue;
				}

				// 检查已涂色区域的颜色是否正确
				if (fill !== expected) {
					incorrectShapes.push(shape.name);
					allCorrect = false;
				}
			}

			if (allCorrect) {
				document.getElementById('message').textContent = '恭喜你！颜色全部正确！';
				document.getElementById('successSound').play().catch(console.error);
				document.getElementById('successSoundEffect').play().catch(console.error);
				levelPassed = true;

				// 增加积分并保存
				currentScore++;
				localStorage.setItem('gameScore', currentScore);
				updateScore();

				// 延迟一秒后自动进入下一关
				setTimeout(() => {
					if (currentLevel < levels.length - 1) {
						currentLevel = (currentLevel + 1) % levels.length;
						loadLevel(currentLevel);
					} else {
						document.getElementById('message').textContent = '恭喜你完成了所有关卡！';
					}
				}, 1000);
			} else {
				levelPassed = false;
				updateNextLevelButton();
				let message = '';
				if (uncoloredShapes.length > 0) {
					message += `以下部分还未涂色: ${uncoloredShapes.join('、')}`;
				}
				if (incorrectShapes.length > 0) {
					if (message) message += '\n';
					message += `以下部分颜色不正确: ${incorrectShapes.join('、')}`;
				}
				document.getElementById('message').textContent = message;
				document.getElementById('errorSound').play().catch(console.error);
				document.getElementById('errorSoundEffect').play().catch(console.error);
			}
		}

		function selectColor(color) {
			selectedColor = color;
			// 更新选中状态的视觉效果
			document.querySelectorAll('.color').forEach(el => {
				el.classList.remove('selected');
				if (el.getAttribute('data-color') === color) {
					el.classList.add('selected');
				}
			});
		}

		function updateButtonsVisibility() {
			const prevButton = document.getElementById('prevButton');
			const nextButton = document.getElementById('nextButton');

			// 在第一关隐藏上一关按钮
			prevButton.style.display = currentLevel === 0 ? 'none' : 'inline-block';
		}

		function prevLevel() {
			if (currentLevel > 0) {
				currentLevel--;
				loadLevel(currentLevel);
			}
		}

		const palette = document.getElementById('palette');
		paletteColors.forEach(color => {
			const swatch = document.createElement('div');
			swatch.className = 'color';
			swatch.style.backgroundColor = color;
			swatch.setAttribute('data-color', color);
			swatch.onclick = () => {
				selectColor(color);
			};
			if (color === selectedColor) {
				swatch.classList.add('selected');
			}
			palette.appendChild(swatch);
		});

		// 初始化第一关或读取进度
		const saved = localStorage.getItem('lastLevel');
		currentLevel = saved ? parseInt(saved) : 0;
		loadLevel(currentLevel);

		errorVid = document.getElementById("errorSoundEffect");
		errorVid.volume = 0.2;
		successVid = document.getElementById("successSoundEffect");
		successVid.volume = 0.2;
	</script>
</body>

</html>